import React from 'react';
import { List, InputItem, Toast,Icon,NavBar,Button, WhiteSpace, WingBlank } from 'antd-mobile';
import axios from '../../axios/index';
import './index.less'
import Utils from '../../utils/index'
export default class Login extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            hasError: false,
            phone: '',
            code:'',
            count: 10,
            click: true,
          }
      }
      onErrorClick = () => {
        if (this.state.hasError) {
          Toast.info('请输入正确的手机号');
        }
      }
      onChange = (value) => {
        let value2=value.replace(/\s/g, '');
        if (!Utils.testPhone(value2)) {
          this.setState({
            hasError: true,
          });
        } else {
          this.setState({
            hasError: false,
          });
        }
        this.setState({
          phone:value,
        });
      }
      onChangeCode = (value) => {
        this.setState({
          code:value,
        });
      }
    
     //获取短信验证码
      getSmsCode = () => {
        let phone=this.state.phone;
        if(phone=='' || this.state.hasError){
           Toast.info('请输入正确的手机号'); 
           return;
        }
        console.log(phone);
        axios.ajax({
          url:'/api/v1/user/bingPhone/code',
          method:'post',
          data:{
            phone:phone.replace(/\s/g, '')
          }
        }).then((res)=>{
            if(res){
              Toast.info('验证码发送成功'+res.data);
            }
        });

        this.setState({
            click:false
         });
        // click is false 的时候，不允许再点击
        if (!this.state.click) {        
          return
        }
        let count = this.state.count
        const timer = setInterval(() => {
            // console.log(this.state.count);
            this.setState({ 
                count: (count--)
            }, () => {
                if (count === -1) {
                    clearInterval(timer);
                    this.setState({
                        click: true ,
                        count: 10
                    })
                }
            });
        }, 1000);
    }
    bindPhone=()=>{
      let phone=this.state.phone;
      let code=this.state.code;
      if(phone=='' || this.state.hasError ||code==''){
        Toast.info('请输入正确的手机号和验证码');
        return;
      }
      axios.ajax({
        url:'/api/v1/user/bingPhone',
        method:'post',
        data:{
          phone:phone.replace(/\s/g, ''),
          code:code
        }
      }).then((res)=>{
        if(res.data!='' || res.data!=null){
          console.log('login:',res);
          Toast.info('欢迎你,'+res.data.phone);
          window.localStorage.userInfo=res.data;
          this.props.history.push('/main');
        }else{
          Toast.info(res.data.message);
        }
      });
    }
    skip=()=>{
      this.props.history.push('/main');
    }
    render(){
        return(
            <div style={{backgroundColor:'white',height:'600px'}}>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() =>{
                        const {history}=this.props;
                        history.push({pathname:'/main'});
                    }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >登录</NavBar>
                <div style={{textAlign:'center',fontSize:"20px",color:'#777'}}>大地保险</div>
                <WhiteSpace size="lg"/>
                <div style={{textAlign:'center',fontSize:"14px",color:'#777'}}>稳固所以深远  中国大地保险</div>
                <WhiteSpace size="lg"/>
                <List renderHeader={() => ''}>
                    <InputItem
                        type="phone"
                        placeholder="请输入手机号"
                        error={this.state.hasError}
                        onErrorClick={this.onErrorClick}
                        onChange={this.onChange}
                        value={this.state.phone}
                    >手机号码</InputItem>
                     <InputItem
                            type='number'
                            placeholder="请输入验证码"
                            onChange={this.onChangeCode}
                            value={this.state.code}
                    >                  
                    </InputItem>
                    <Button id="btnCode" type="ghost"  inline size="small" onClick={this.getSmsCode} style={{position:'absolute',top: '47px', right:'12px'}}>
                       {this.state.click? '获取验证码': `${this.state.count} 秒后重发`}
                    </Button>
                </List>
                <WhiteSpace size="lg"/>
                <WhiteSpace size="lg"/>
                <WingBlank>
                <Button type="primary" size="large" className="btnLogin" onClick={this.bindPhone} style={{textAlign:'center',margin:'0px auto',fontSize:'20px !important'}}>绑定手机号</Button>
                </WingBlank>
                <WhiteSpace size="lg"/>
                {/* <div style={{textAlign:'center',margin:'0px auto'}}><a style={{color:'#777'}} href="#"  onClick={()=>{this.skip()}}>跳过</a></div> */}
                <div style={{textAlign:'center',margin:'0px auto'}}><a style={{color:'#777'}} href="#"  onClick={this.skip}>跳过</a></div>
            </div>
        );
    }
}